<template>
	<pc-nav></pc-nav>

	<div class="container-fluid d-flex" style="min-height: 100vh">
		<s-layout navbar="none">
			<!-- 筛选 -->
			<div class="container mt-3 mb-3 p-md-2">
				<view>
					<s-course-category :isTk="false" :selectCategoryId="state.categoryId"  @update:selected="handleCategoryChange" />
				</view>

				<view v-if="state.pagination.total > 0" class="goods-list">
					<view class="goods-list_con">
						<view class="ss-p-l-30 ss-p-r-30 ss-m-b-30" style="width: 370px !important;"
							v-for="item in state.pagination.data" :key="item.id">
							<s-goods-column-pc style="cursor: pointer;" class="" size="sm" :data="item" :topRadius="10" :bottomRadius="10"
								@click="sheep.$router.go('/pages/goods/index', { id: item.id })">

							</s-goods-column-pc>
						</view>
					</view>
				</view>
				<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
			contentdown: '上拉加载更多',
		  }" @tap="loadmore" style="display: none" />
				<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
				</s-empty>
			</div>
			<div class="container-fluid">
				<pc-footer></pc-footer>
			</div>
		</s-layout>
	</div>

</template>

<script setup>
	import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
	import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';

	const sys_navBar = sheep.$platform.navbar;
	const emits = defineEmits(['close', 'change']);

	const pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1

	};

	const state = reactive({
    category1: '',
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		curcategory: '一级造价工程师',
		showFilter: false,
		categoryId: 0,
    selectCategoryId: 170,
		categoryList: [],
		loadStatus: '',
		keyword: '',
		leftGoodsList: [],
		rightGoodsList: [],
	});

	uni.hideTabBar({
		fail: () => {},
	});


	// 加载瀑布流
	let count = 0;
	let leftHeight = 0;
	let rightHeight = 0;

	function mountMasonry(height = 0, where = 'left') {
		if (where === 'left') {
			leftHeight += height;
		} else {
			rightHeight += height;
		}

		if (!state.pagination.data[count]) return;

		if (leftHeight <= rightHeight) {
			state.leftGoodsList.push(state.pagination.data[count]);
		} else {
			state.rightGoodsList.push(state.pagination.data[count]);
		}
		count++;
	}

	async function getCategoryList() {
		const {
			code,
			data
		} = await sheep.$api.category.list({
			id: 167,
		});
		if (code === 1) {
			state.categoryList = data.childrenshow;
		}
	}

  const handleCategoryChange = (v) => {
    state.category1 = v.category1;
    //state.category2 = v.category2;
    //state.tiku_type = v.tikutype;
    getList(state.category1);
  }

	async function getList(categoryId, keyword, page = 1, list_rows = 6) {
		//console.log("hahahah");

		state.loadStatus = 'loading';
		const res = await sheep.$api.goods.list({
			category_id: !keyword ? categoryId : '',
			list_rows,
			keyword: keyword,
			page,
		});
		if (res.code === 1) {
			console.log(res.data)
			// let couponList = _.concat(state.pagination.data, res.data.data);
			// console.log(couponList)
			state.pagination = {
				...res.data,
				data: res.data.data,
			};
			// console.log(state.pagination.data);
			//mountMasonry();
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(
				state.categoryId,
				state.keyword,
				state.pagination.current_page + 1,
			);
		}
	}
	onLoad((options) => {
		getCategoryList();
		if (options.categoryId == null) {
			//默认打开的
			//请求接口获取用户的categoryId
			sheep.$api.goods.getUserCategoryId().then((res) => {
				if (res && res.code == 1) {
					state.categoryId = res.data.id;
					state.curcategory = res.data.name;
				} else {
					state.categoryId = 170;
				}
				state.keyword = options.keyword;
				getList(state.categoryId, state.keyword);
			})
		} else {
			//用户切换的
			state.categoryId = options.categoryId;
			if (options.categoryName) {
				state.curcategory = options.categoryName
			}
			state.keyword = options.keyword;
			getList(state.categoryId, state.keyword);
		}
	});
	// 上拉加载更多
	/*onReachBottom(() => {
	 loadmore();
	});*/

	function changeCategory() {
		state.showFilter = !state.showFilter;
	}

	function handleCategoryClick(id, name) {
		$(".card-title").css("color", "#000000");
		$("#" + id).css("color", "#0000ff");
		state.curcategory = name
		getList(id, state.keyword);
		state.showFilter = false;
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.card {
		height: 80px;
		line-height: 80px;
	}

	.uni-page-body {
		background-color: #ffffff !important;
	}

	.page-app {
		background-color: #ffffff !important;
		z-index: 0 !important;
	}

	.goods-list_con {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.ss-p-l-30 {
		padding: 20px;
		/*flex: 1 1 calc(33% - 30px);*/
	}

	.sl-goods-card {
		.sl-img-box {
			height: 350px !important;
		}

	}

	.ss-m-t-20 {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}



	.toptitle {
		background-color: #FFFFFF;
		text-align: center;
		color: #666666;
		height: 54px;
		line-height: 66px;
		font-size: 16px;
	}

	::v-deep .uni-popup .uni-popup__wrapper {
		background: none !important;
	}



	/* 卡片容器样式 */

	/* 卡片样式 */
	.card {
		/*flex: 0 0 calc(50% - 40px);*/
		border: none;
		line-height: 32px;
		background-color: #fff;
		text-align: center;
		/*transition: transform 0.3s, box-shadow 0.3s;*/
	}

	/* 卡片标题样式 */
	.card-title {
		margin-left: 3px;
		margin-bottom: 0 !important;
		font-size: 14px;
		color: #333;
	}
</style>